<template>
  <div class="booksBox">
    <!--左侧目录-->
    <BooksMenu :titleList="titleList" @selectBook="bookActive" class="bookMenu"/>
    <div class="content">
      <!--关于作者-->
      <div class="author">
        <div class="name">{{author.category}}——{{author.name}}</div>
        <div class="intro" v-html="author.content"/>
      </div>
      <!--文章目录-->
      <div class="detailMenu">
        <div class="title" id="menu">目录</div>
        <div class="menuBox">
          <router-link
              v-for="(item,index) in articleList"
              :key="item.bid"
              :to="{
                name: 'Article',
                query: {
                  id: item.bid,
                  category: item.category
                }
              }"
              class="menuItem"
          >
            第{{++index}}章 {{item.name}}
          </router-link>
        </div>
      </div>
      <!--快捷滚动按钮-->
      <a href="#menu" class="menuBtn">目录</a>
    </div>
  </div>
</template>

<script setup>
  import {reactive,onBeforeMount} from "vue"

  import {http} from "../config/axios"
  import BooksMenu from "../components/BooksMenu.vue"
  import {useUserStore} from "../config/pinia/user.js"

  //用户状态
  const userStore = useUserStore()

  //书名列表
  const titleList = reactive([])

  //分类后的文章
  const article = reactive(new Map())

  //当前页面的作者介绍
  const author = reactive({
    bid: 0,
    category: "未知",
    content: "暂无介绍",
    name: "未知"
  })

  //当前页面的文章列表
  let articleList = reactive([])

  //获取数据
  async function getData(){
    const res = await http({
      method: "GET",
      url: "article/get_article",
    })
    if(res.data.code === 0){
      //所属列表
      const categoryList = []
      res.data.data.articleList.map(item=>{
        categoryList.push(item.category)
      })
      //作者列表
      const authorList = []
      Array.from(new Set(categoryList)).map(item=>{
        if(item.includes("作者")){
          authorList.push(item)
        }else{
          titleList.push(item)
        }
      })
      //将文章分类存入map对象中
      titleList.map(title=>{
        const tempList = []
        res.data.data.articleList.map(item=>{
          if(title === item.category){
            tempList.push(item)
          }
        })
        article.set(title,tempList)
      })
      //存入作者
      authorList.map(author=>{
        res.data.data.articleList.map(item=>{
          if(author === item.category){
            article.set(author,item)
          }
        })
      })
      //设置显示第一个
      bookActive(titleList[0])
    }
  }

  //设置页面展示的内容
  function bookActive(value){
    const authorObj = article.get(`${value}作者`)
    for (let key in authorObj) {
      author[key] = authorObj[key]
    }
    articleList.splice(0,articleList.length)
    articleList.push(...article.get(value))
  }

  //组件挂载前
  onBeforeMount(()=>{
    getData()
  })
</script>

<style scoped>
  .booksBox{
    display: flex;
    height: calc(100vh - 59px);
  }
  .bookMenu{
    flex-shrink: 0;
  }
  .content{
    flex: 1;
    height: 100%;
    overflow-y: auto;
    padding: 20px;
    background-color: v-bind("userStore.bg");
    color: v-bind("userStore.color");
    scroll-behavior: smooth;
  }
  .author .name{
    font-size: 30px;
    font-weight: bold;
    text-align: center;
  }
  .author .intro{
    padding-top: 20px;
  }
  .author .intro :deep(p){
    font-size: 18px;
    line-height: 1.5;
    text-indent: 2em;
    padding-bottom: 15px;
  }
  .detailMenu{
    border-top: 2px dotted #cccccc;
    margin-top: 20px;
  }
  .detailMenu .title{
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    padding: 20px 0;
  }
  .detailMenu .menuBox{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px 20px;
  }
  .detailMenu .menuBox .menuItem{
    text-decoration: none;
    color: v-bind("userStore.color");
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden;
  }
  .detailMenu .menuBox .menuItem:hover{
    color: v-bind("userStore.primary");
  }
  @media(max-width: 1024px){
    .detailMenu .menuBox{
      grid-template-columns: 1fr 1fr;
    }
  }
  .menuBtn{
    position: fixed;
    top: 40%;
    right: 10px;
    border: 2px solid #cccccc;
    display: inline-block;
    text-decoration: none;
    writing-mode: vertical-rl;
    color: #ffffff;
    padding: 10px 5px;
    background: #F3904F;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #3B4371, #F3904F);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #3B4371, #F3904F); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
</style>